import React, { useState } from 'react';
import { motion } from 'framer-motion';
import { useTheme } from '@/hooks/useTheme';

// 帮助文档分类数据
const helpCategories = [
  {
    id: 'getting-started',
    title: '快速开始',
    icon: 'fa-rocket',
    description: '新手上路指南，快速了解系统功能',
    articles: [
      {
        id: 1,
        title: '系统介绍与功能概览',
        content: '本系统是一个多系统集成的管理平台，目前包含DevOps系统和绩效管理系统。系统采用模块化设计，支持快速切换不同业务系统。'
      },
      {
        id: 2,
        title: '首次登录与系统导航',
        content: '登录后您将看到系统主界面，左侧为菜单栏，顶部为系统切换和用户信息区域。点击系统名称可以切换不同业务系统。'
      },
      {
        id: 3,
        title: '基本操作指南',
        content: '系统支持拖拽、搜索、筛选等基本操作。每个页面都有相应的操作按钮和提示信息。'
      }
    ]
  },
  {
    id: 'devops',
    title: 'DevOps系统',
    icon: 'fa-code',
    description: '研发管理全流程操作指南',
    articles: [
      {
        id: 4,
        title: 'Dashboard使用指南',
        content: 'Dashboard页面展示项目进度、缺陷分布、团队动态等关键指标。支持自定义视图和实时刷新。'
      },
      {
        id: 5,
        title: '产品管理功能说明',
        content: '产品管理模块用于管理产品线、产品版本和产品需求。支持产品规划、版本控制和需求跟踪。'
      },
      {
        id: 6,
        title: '项目管理最佳实践',
        content: '项目管理支持敏捷开发流程，包括迭代规划、任务分配、进度跟踪和燃尽图分析。'
      },
      {
        id: 7,
        title: '缺陷管理流程',
        content: '缺陷管理遵循标准的Bug生命周期：新建→分配→修复→验证→关闭。支持缺陷分类、优先级设置和统计分析。'
      }
    ]
  },
  {
    id: 'performance',
    title: '绩效管理系统',
    icon: 'fa-chart-line',
    description: '员工绩效评估与考核管理',
    articles: [
      {
        id: 8,
        title: '绩效看板功能介绍',
        content: '绩效看板展示个人和团队的绩效指标，包括KPI完成情况、考核结果和趋势分析。'
      },
      {
        id: 9,
        title: 'KPI设置与管理',
        content: '支持自定义KPI指标，设置权重和目标值。KPI数据支持自动采集和手动录入。'
      },
      {
        id: 10,
        title: '考核流程说明',
        content: '考核管理包括考核周期设置、考核表设计、评分规则和结果计算。支持多维度考核和360度评估。'
      }
    ]
  },
  {
    id: 'system-management',
    title: '系统管理',
    icon: 'fa-cog',
    description: '系统配置与权限管理',
    articles: [
      {
        id: 11,
        title: '用户管理操作指南',
        content: '用户管理支持用户注册、信息维护、角色分配和状态管理。支持批量导入和导出功能。'
      },
      {
        id: 12,
        title: '角色权限配置',
        content: '基于RBAC的权限管理模型，支持角色定义、权限分配和菜单访问控制。'
      },
      {
        id: 13,
        title: '菜单管理说明',
        content: '菜单管理模块用于配置系统菜单结构，支持菜单排序、状态控制和权限关联。'
      }
    ]
  },
  {
    id: 'troubleshooting',
    title: '故障排除',
    icon: 'fa-wrench',
    description: '常见问题与解决方案',
    articles: [
      {
        id: 14,
        title: '登录问题排查',
        content: '如果无法登录，请检查网络连接、浏览器兼容性和账号状态。支持密码重置和账号解锁功能。'
      },
      {
        id: 15,
        title: '数据同步问题',
        content: '数据同步异常时，请检查系统连接状态和数据源配置。支持手动同步和日志查看。'
      },
      {
        id: 16,
        title: '性能优化建议',
        content: '系统性能优化包括数据库优化、缓存配置和前端资源压缩。建议定期清理缓存和历史数据。'
      }
    ]
  }
];

// 常见问题数据
const faqs = [
  {
    question: '如何切换不同的业务系统？',
    answer: '点击页面顶部左侧的系统名称，会显示系统切换下拉菜单，选择目标系统即可完成切换。'
  },
  {
    question: '忘记密码怎么办？',
    answer: '在登录页面点击"忘记密码"链接，按照提示进行密码重置操作。'
  },
  {
    question: '如何申请新的系统权限？',
    answer: '请联系系统管理员或通过用户管理模块提交权限申请。'
  },
  {
    question: '数据导出支持哪些格式？',
    answer: '系统支持Excel、CSV和PDF格式的数据导出，具体格式取决于功能模块。'
  },
  {
    question: '如何查看操作日志？',
    answer: '操作日志功能在系统管理模块中，支持按时间、用户和操作类型进行筛选。'
  }
];

const Help: React.FC = () => {
  const { isDark } = useTheme();
  const [activeCategory, setActiveCategory] = useState('getting-started');
  const [searchTerm, setSearchTerm] = useState('');
  const [expandedArticles, setExpandedArticles] = useState<number[]>([]);

  // 切换文章展开状态
  const toggleArticle = (articleId: number) => {
    setExpandedArticles(prev => 
      prev.includes(articleId) 
        ? prev.filter(id => id !== articleId)
        : [...prev, articleId]
    );
  };

  // 过滤文章
  const filteredCategories = helpCategories.map(category => ({
    ...category,
    articles: category.articles.filter(article => 
      article.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
      article.content.toLowerCase().includes(searchTerm.toLowerCase())
    )
  })).filter(category => category.articles.length > 0);

  const currentCategory = helpCategories.find(cat => cat.id === activeCategory);

  return (
    <div className={`min-h-screen ${isDark ? 'bg-gray-900' : 'bg-white'} transition-colors duration-300`}>
      <div className="max-w-7xl mx-auto px-4 py-8">
        {/* 页面标题 */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="text-center mb-12"
        >
          <h1 className="text-4xl font-bold mb-4 text-gray-900 dark:text-white">
            <i className="fas fa-book-open mr-4 text-blue-600"></i>
            帮助中心
          </h1>
          <p className="text-lg text-gray-600 dark:text-gray-300 max-w-3xl mx-auto">
            这里是系统的帮助文档中心，包含使用指南、功能说明和故障排除等内容。
            如果您找不到需要的信息，请联系技术支持。
          </p>
        </motion.div>

        {/* 搜索框 */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5, delay: 0.1 }}
          className="mb-8"
        >
          <div className="relative max-w-2xl mx-auto">
            <input
              type="text"
              placeholder="搜索帮助文档..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full px-4 py-3 pl-12 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            />
            <i className="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
          </div>
        </motion.div>

        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
          {/* 左侧分类导航 */}
          <motion.div
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.5, delay: 0.2 }}
            className="lg:col-span-1"
          >
            <div className={`rounded-lg p-6 ${isDark ? 'bg-gray-800' : 'bg-white'} shadow-lg`}>
              <h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">文档分类</h3>
              <nav className="space-y-2">
                {helpCategories.map((category) => (
                  <button
                    key={category.id}
                    onClick={() => setActiveCategory(category.id)}
                    className={`w-full text-left px-3 py-2 rounded-md transition-colors duration-200 ${
                      activeCategory === category.id
                        ? 'bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300'
                        : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
                    }`}
                  >
                    <i className={`fas ${category.icon} mr-2`}></i>
                    {category.title}
                  </button>
                ))}
              </nav>
            </div>

            {/* 常见问题 */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.4 }}
              className={`mt-6 rounded-lg p-6 ${isDark ? 'bg-gray-800' : 'bg-white'} shadow-lg`}
            >
              <h3 className="text-lg font-semibold mb-4 text-gray-900 dark:text-white">常见问题</h3>
              <div className="space-y-3">
                {faqs.map((faq, index) => (
                  <div key={index} className="text-sm">
                    <div className="font-medium text-gray-900 dark:text-white mb-1">
                      {faq.question}
                    </div>
                    <div className="text-gray-600 dark:text-gray-300">
                      {faq.answer}
                    </div>
                  </div>
                ))}
              </div>
            </motion.div>
          </motion.div>

          {/* 右侧内容区域 */}
          <motion.div
            initial={{ opacity: 0, x: 20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.5, delay: 0.3 }}
            className="lg:col-span-3"
          >
            {searchTerm ? (
              // 搜索结果
              <div className={`rounded-lg p-6 ${isDark ? 'bg-gray-800' : 'bg-white'} shadow-lg`}>
                <h3 className="text-xl font-semibold mb-6 text-gray-900 dark:text-white">
                  搜索结果 ({filteredCategories.reduce((sum, cat) => sum + cat.articles.length, 0)} 条)
                </h3>
                <div className="space-y-6">
                  {filteredCategories.map(category => (
                    <div key={category.id}>
                      <h4 className="text-lg font-medium mb-4 text-gray-900 dark:text-white">
                        <i className={`fas ${category.icon} mr-2`}></i>
                        {category.title}
                      </h4>
                      <div className="space-y-4">
                        {category.articles.map(article => (
                          <div key={article.id} className="border-l-4 border-blue-500 pl-4">
                            <button
                              onClick={() => toggleArticle(article.id)}
                              className="w-full text-left font-medium text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400"
                            >
                              {article.title}
                              <i className={`fas fa-chevron-${expandedArticles.includes(article.id) ? 'up' : 'down'} ml-2 text-sm`}></i>
                            </button>
                            {expandedArticles.includes(article.id) && (
                              <div className="mt-2 text-gray-600 dark:text-gray-300">
                                {article.content}
                              </div>
                            )}
                          </div>
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            ) : (
              // 分类内容
              currentCategory && (
                <div className={`rounded-lg p-6 ${isDark ? 'bg-gray-800' : 'bg-white'} shadow-lg`}>
                  <div className="mb-6">
                    <h2 className="text-2xl font-bold mb-2 text-gray-900 dark:text-white">
                      <i className={`fas ${currentCategory.icon} mr-3`}></i>
                      {currentCategory.title}
                    </h2>
                    <p className="text-gray-600 dark:text-gray-300">
                      {currentCategory.description}
                    </p>
                  </div>

                  <div className="space-y-6">
                    {currentCategory.articles.map((article, index) => (
                      <motion.div
                        key={article.id}
                        initial={{ opacity: 0, y: 20 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.5, delay: index * 0.1 }}
                        className="border-l-4 border-blue-500 pl-4"
                      >
                        <button
                          onClick={() => toggleArticle(article.id)}
                          className="w-full text-left font-medium text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400"
                        >
                          {article.title}
                          <i className={`fas fa-chevron-${expandedArticles.includes(article.id) ? 'up' : 'down'} ml-2 text-sm`}></i>
                        </button>
                        {expandedArticles.includes(article.id) && (
                          <motion.div
                            initial={{ opacity: 0, height: 0 }}
                            animate={{ opacity: 1, height: 'auto' }}
                            transition={{ duration: 0.3 }}
                            className="mt-2 text-gray-600 dark:text-gray-300"
                          >
                            {article.content}
                          </motion.div>
                        )}
                      </motion.div>
                    ))}
                  </div>
                </div>
              )
            )}

            {/* 技术支持信息 */}
            <motion.div
              initial={{ opacity: 0, y: 20 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: 0.5 }}
              className={`mt-6 rounded-lg p-6 ${isDark ? 'bg-blue-900' : 'bg-blue-50'} border border-blue-200 dark:border-blue-700`}
            >
              <div className="flex items-center mb-3">
                <i className="fas fa-life-ring text-2xl text-blue-600 mr-3"></i>
                <h3 className="text-lg font-semibold text-blue-900 dark:text-blue-100">需要更多帮助？</h3>
              </div>
              <p className="text-blue-800 dark:text-blue-200 mb-4">
                如果本文档无法解决您的问题，请联系我们的技术支持团队。
              </p>
              <div className="space-y-2 text-sm">
                <div className="flex items-center">
                  <i className="fas fa-envelope text-blue-600 mr-2"></i>
                  <span className="text-blue-800 dark:text-blue-200">邮箱：support@kz-devops.com</span>
                </div>
                <div className="flex items-center">
                  <i className="fas fa-phone text-blue-600 mr-2"></i>
                  <span className="text-blue-800 dark:text-blue-200">电话：400-123-4567</span>
                </div>
                <div className="flex items-center">
                  <i className="fas fa-clock text-blue-600 mr-2"></i>
                  <span className="text-blue-800 dark:text-blue-200">服务时间：工作日 9:00-18:00</span>
                </div>
              </div>
            </motion.div>
          </motion.div>
        </div>
      </div>
    </div>
  );
};

export default Help;